<!-- 设备管理-设备列表页面 -->
<template>
  <div class="app-container" style="padding-bottom: 50px; margin: 0">
    <px-form v-show="showSearch" ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
      <!-- <px-button style="margin-top: 0" type="primary">抄表任务</px-button> -->

      <span>
        <!-- <EquipSystemTree
          :className="props.classcode"
          :systemCode="queryParams.systemCode"
          @changeAllSystemCodes="changeAllSystemCodes"
          @changeSystemCodes="changeSystemCodes"
          @clearSystem="clearSystem"
        /> -->
        <px-form-item label="系统" style="width: 270px !important">
          <px-tree-select
            v-model="queryParams.systemCode"
            clearable
            style="width: 100%"
            placeholder="请选择设备系统（树状图）"
            :props="defaultProps"
            :data="systemList2"
            filterable
            @node-click="nodeClick2"
          />
        </px-form-item>

        <px-form-item label="设备" style="width: 270px !important">
          <!-- <px-input v-model="queryParams.eqpId" style="width: 220px" placeholder="请输入" clearable /> -->
          <px-select
            v-model="queryParams.eqpId"
            filterable
            remote
            reserve-keyword
            remote-show-suffix
            clearable
            :remote-method="remoteMethod2"
            placeholder="请选择"
            style="width: 220px"
          >
            <px-option v-for="dict in eqpList2" :key="dict.eqpId" :label="`${dict.eqpName}(${dict.eqpId})`" :value="dict.eqpId" />
          </px-select>
        </px-form-item>
        <px-form-item label="仪表" style="width: 270px !important">
          <!-- <px-input v-model="queryParams.instrumentId" style="width: 220px" placeholder="请输入" clearable /> -->
          <px-select
            v-model="queryParams.instrumentId"
            filterable
            remote
            reserve-keyword
            remote-show-suffix
            clearable
            :remote-method="remoteMethod22"
            placeholder="请选择"
            style="width: 220px"
          >
            <px-option v-for="dict in instrumenList2" :key="dict.eqpId" :label="`${dict.eqpName}(${dict.eqpId})`" :value="dict.eqpId" />
          </px-select>
        </px-form-item>
        <px-form-item label="抄表项" style="width: 270px !important">
          <px-input v-model="queryParams.itemName" style="width: 220px" placeholder="请输入" clearable />
          <!-- <px-select v-model="queryParams.instrumentId" clearable placeholder="请选择" style="width: 220px" filterable>
            <px-option v-for="dict in instrumenList" :key="dict.eqpId" :label="dict.eqpName" :value="dict.eqpId" />
          </px-select> -->
        </px-form-item>
        <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery('search')">查询</px-button>
        <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
      </span>
      <!-- <px-button style="margin-top: 0" type="primary" plain @click="exportToExcel()">导出</px-button> -->
    </px-form>
    <px-row :gutter="10" class="mb8">
      <px-col v-if="classcode == 'WATER'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_WATER_ADD'" type="primary" icon="" @click="handleAdd">新增</px-button>
      </px-col>
      <px-col v-if="classcode == 'WATER'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_WATER_EXPORT'" type="primary" plain icon="" @click="handleExport">导入</px-button>
      </px-col>
      <px-col v-if="classcode == 'WATER'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_WATER_DOWN'" type="primary" plain icon="" @click="handleExportall">导出</px-button>
      </px-col>

      <px-col v-if="classcode == 'GAS'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_GAS_ADD'" type="primary" icon="" @click="handleAdd">新增</px-button>
      </px-col>
      <px-col v-if="classcode == 'GAS'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_GAS_EXPORT'" type="primary" plain icon="" @click="handleExport">导入</px-button>
      </px-col>
      <px-col v-if="classcode == 'GAS'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_GAS_DOWN'" type="primary" plain icon="" @click="handleExportall">导出</px-button>
      </px-col>

      <px-col v-if="classcode == 'MACHINE'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_MACHINE_ADD'" type="primary" icon="" @click="handleAdd">新增</px-button>
      </px-col>
      <px-col v-if="classcode == 'MACHINE'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_MACHINE_EXPORT'" type="primary" plain icon="" @click="handleExport">导入</px-button>
      </px-col>
      <px-col v-if="classcode == 'MACHINE'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_MACHINE_DOWN'" type="primary" plain icon="" @click="handleExportall">导出</px-button>
      </px-col>

      <px-col v-if="classcode == 'ELECTRICTITY'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_ELECTRICTITY_ADD'" type="primary" icon="" @click="handleAdd">新增</px-button>
      </px-col>
      <px-col v-if="classcode == 'ELECTRICTITY'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_ELECTRICTITY_EXPORT'" type="primary" plain icon="" @click="handleExport">导入</px-button>
      </px-col>
      <px-col v-if="classcode == 'ELECTRICTITY'" :span="1.5">
        <px-button v-has="'METER_READING_FROM_ELECTRICTITY_DOWN'" type="primary" plain icon="" @click="handleExportall">导出</px-button>
      </px-col>

      <px-dialog v-model="dialogVisible" draggable clickHideContent title="导入数据" :width="600" :before-close="handelClose">
        <div class="import-bottle">
          <div class="import-bottle-upload">
            <div class="import-bottle-title">
              上传前请先
              <!-- <span class="download" @click="downloadFn"> 下载模板 </span> -->
              <a :href="fsxlsx" download="仪表导入模板.xlsx"><span class="download"> 下载模板 </span></a>
              ，填写完成后导入数据
            </div>
            <importFiles
              ref="dialogSuccess"
              v-model="importFile"
              :upfileid="upfileid"
              :isNotImmediateUpload="false"
              :uploadApi="meterreadingimport"
              @submit="submitHandler"
            />
          </div>
        </div>
      </px-dialog>

      <!-- <px-col :span="1.5">
        <px-button v-has="'CommonEquipListDelete'" type="danger" plain icon="" :disabled="multiple" @click="handleDelete">删除</px-button>
      </px-col> -->
    </px-row>
    <px-table
      v-loading="loading"
      class="readingtable"
      :data="typeList"
      show-overflow-tooltip
      height="calc(100vh - 339px)"
      border
      :cell-style="cellStyle"
      @selection-change="handleSelectionChange"
    >
      <!-- <px-table-column type="selection" width="40" /> -->
      <px-table-column label="序号" width="80" align="center" fixed="left">
        <template #default="{ $index }">
          {{ $index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
        </template>
      </px-table-column>
      <px-table-column label="系统" prop="name">
        <template #default="scope">
          <span>{{ scope.row.systemName }}</span>
        </template>
      </px-table-column>

      <px-table-column label="设备名称" prop="name">
        <template #default="scope">
          <span>{{ scope.row.eqpName }}</span>
        </template>
      </px-table-column>

      <px-table-column label="设备编号" prop="meterName">
        <template #default="scope">
          <span>{{ scope.row.eqpId }}</span>
        </template>
      </px-table-column>
      <px-table-column label="抄表项" prop="specValue">
        <template #default="scope">
          <span>{{ scope.row.itemName }}</span>
        </template>
      </px-table-column>
      <px-table-column label="仪表编号" prop="meterName">
        <template #default="scope">
          <span>{{ scope.row.instrumentId }}</span>
        </template>
      </px-table-column>
      <px-table-column label="SPEC值" prop="meterName">
        <template #default="scope">
          <span>{{ scope.row.uslValue }}~{{ scope.row.lslValue }}</span>
        </template>
      </px-table-column>
      <px-table-column label="单位" prop="meterName">
        <template #default="scope">
          <span>{{ scope.row.unit }}</span>
        </template>
      </px-table-column>
      <px-table-column label="抄表方式" prop="meterName">
        <template #default="scope">
          <span>{{ scope.row.type == 0 ? "自动抄表" : "手动抄表" }}</span>
        </template>
      </px-table-column>
      <px-table-column label="操作" align="center" width="140">
        <template #default="scope">
          <px-button v-if="classcode == 'WATER'" v-has="'METER_READING_FROM_WATER_EDITOR'" link type="primary" @click="handleEditor(scope.row.id)">
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon>
                <EditPen />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button v-if="classcode == 'WATER'" v-has="'METER_READING_FROM_WATER_DELETE'" link type="danger" @click="handleDelete(scope.row)"
            ><px-tooltip class="box-item" content="删除" placement="top">
              <px-icon>
                <Delete />
              </px-icon> </px-tooltip
          ></px-button>

          <px-button v-if="classcode == 'GAS'" v-has="'METER_READING_FROM_GAS_EDITOR'" link type="primary" @click="handleEditor(scope.row.id)">
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon>
                <EditPen />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button v-if="classcode == 'GAS'" v-has="'METER_READING_FROM_GAS_DELETE'" link type="danger" @click="handleDelete(scope.row)"
            ><px-tooltip class="box-item" content="删除" placement="top">
              <px-icon>
                <Delete />
              </px-icon> </px-tooltip
          ></px-button>

          <px-button
            v-if="classcode == 'MACHINE'"
            v-has="'METER_READING_FROM_MACHINE_EDITOR'"
            link
            type="primary"
            @click="handleEditor(scope.row.id)"
          >
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon>
                <EditPen />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button v-if="classcode == 'MACHINE'" v-has="'METER_READING_FROM_MACHINE_DELETE'" link type="danger" @click="handleDelete(scope.row)"
            ><px-tooltip class="box-item" content="删除" placement="top">
              <px-icon>
                <Delete />
              </px-icon> </px-tooltip
          ></px-button>

          <px-button
            v-if="classcode == 'ELECTRICTITY'"
            v-has="'METER_READING_FROM_ELECTRICTITY_EDITOR'"
            link
            type="primary"
            @click="handleEditor(scope.row.id)"
          >
            <px-tooltip class="box-item" content="编辑" placement="top">
              <px-icon>
                <EditPen />
              </px-icon> </px-tooltip
          ></px-button>
          <px-button
            v-if="classcode == 'ELECTRICTITY'"
            v-has="'METER_READING_FROM_ELECTRICTITY_DELETE'"
            link
            type="danger"
            @click="handleDelete(scope.row)"
            ><px-tooltip class="box-item" content="删除" placement="top">
              <px-icon>
                <Delete />
              </px-icon> </px-tooltip
          ></px-button>
        </template>
      </px-table-column>
      <template #empty>
        <px-empty :image-size="150" />
      </template>
    </px-table>
    <pagination
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      style="margin-bottom: -10px"
      :total="total"
      @pagination="getList"
    />
    <px-dialog v-model="addVisible" draggable clickHideContent width="500" :title="buttonTitle" append-to-body align-center>
      <px-form v-show="showSearch" ref="detailruleFormRef" :model="addForm" :rules="rules2" :inline="true" label-width="120px">
        <px-row>
          <px-col :span="24">
            <px-form-item style="width: 400px !important" label="系统">
              <px-tree-select
                v-model="addForm.systemCode"
                clearable
                style="width: 100%"
                placeholder="请选择设备系统（树状图）"
                :props="defaultProps"
                :data="systemList"
                filterable
                @node-click="nodeClick"
              />
            </px-form-item>
            <px-form-item style="width: 400px !important" label="设备名称(编码)">
              <px-select
                v-model="addForm.eqpId"
                filterable
                remote
                reserve-keyword
                remote-show-suffix
                clearable
                :remote-method="remoteMethod"
                placeholder="请选择"
                style="width: 280px"
                @change="eqpIdchange"
              >
                <px-option v-for="dict in eqpList" :key="dict.eqpId" :label="`${dict.eqpName}(${dict.eqpId})`" :value="dict.eqpId" />
              </px-select>
            </px-form-item>
            <px-form-item style="width: 400px !important" label="仪表名称(编码)">
              <px-select
                v-model="addForm.instrumentId"
                filterable
                remote
                reserve-keyword
                remote-show-suffix
                clearable
                :remote-method="remoteMethod12"
                placeholder="请选择"
                style="width: 280px"
                @change="instrumentIdchange"
              >
                <px-option v-for="dict in instrumenList" :key="dict.eqpId" :label="`${dict.eqpName}(${dict.eqpId})`" :value="dict.eqpId" />
              </px-select>
            </px-form-item>
            <span v-if="tsspanshow1" class="tsspan">仪表关联设备与当前设备信息不一致，请调整正确后继续</span>
            <px-form-item style="width: 400px !important" label="指标名称(编码)">
              <!-- <px-select v-model="addForm.specId" placeholder="请选择" style="width: 280px" filterable @change="specIdchange">
                <px-option
                  v-for="dict in specIdList"
                  :key="dict.measureCode"
                  :label="`${dict.measureName}(${dict.measureCode})`"
                  :value="dict.measureCode"
                />
              </px-select> -->
              <px-input
                :value="`${addForm.specName}${addForm.specId != '' ? `(${addForm.specId})` : ''}`"
                disabled
                style="width: 280px"
                placeholder="指标名称(编码)"
                clearable
              />
              <px-button size="small" style="position: absolute; right: -50px" type="primary" @click="setmeasure()"> 选择 </px-button>
            </px-form-item>
            <span v-if="tsspanshow2" class="tsspan">指标设备/系统信息与当前设备/系统信息不一致，请调整正确后继续</span>
            <px-form-item style="width: 400px !important" label="抄表项" prop="itemName">
              <px-input v-model="addForm.itemName" style="width: 280px" placeholder="请输入抄表项" clearable />
            </px-form-item>
            <px-form-item style="width: 400px !important" label="抄表方式">
              <px-select v-model="addForm.type" placeholder="请选择" style="width: 280px" filterable>
                <px-option v-for="dict in typevalueList" :key="dict.value" :label="dict.name" :value="dict.value" />
              </px-select>
            </px-form-item>
            <px-form-item style="width: 400px !important" label="SPEC">
              <px-input-number v-model="addForm.uslValue" controls-position="right" style="width: 120px" placeholder="上限值" clearable />
              <span style="display: inline-block; width: 40px; text-align: center">至</span>
              <px-input-number v-model="addForm.lslValue" controls-position="right" style="width: 120px" placeholder="下限值" clearable />
            </px-form-item>
            <px-form-item style="width: 400px !important" label="单位">
              <px-input v-model="addForm.unit" style="width: 280px" placeholder="请输入" clearable />
            </px-form-item>
          </px-col>
        </px-row>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="addVisible = false">取消</px-button>
          <px-button type="primary" @click="addeqp(detailruleFormRef)"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
    <px-dialog v-model="FileVisible" draggable clickHideContent width="1100" title="导入结果" append-to-body align-center>
      <px-table :data="fileresultList" show-overflow-tooltip border>
        <px-table-column label="行数" prop="name">
          <template #default="scope">
            <span>{{ scope.row.rowIndex }}</span>
          </template>
        </px-table-column>
        <px-table-column label="导入结果" prop="name">
          <template #default="scope">
            <span v-if="scope.row.success == false" style="color: #ef4444">{{ scope.row.message }}</span>
            <span v-else style="color: #10b981">{{ scope.row.message }}</span>
          </template>
        </px-table-column>
      </px-table>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="FileVisible = false">关闭</px-button>
          <!-- <px-button type="primary" @click="addeqp(detailruleFormRef)"> 确定 </px-button> -->
        </span>
      </template>
    </px-dialog>
    <measure v-if="measureShow" :classcode="classcode" @close="measureclose" @setmeasure="setmeasureValue" />
  </div>
</template>

<script setup name="Dict" lang="ts">
defineOptions({
  name: "SystemDataDict"
});

// import { router } from "@/router";
import { PxMessage, PxMessageBox } from "px-ui";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { getToken } from "@/utils/auth";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
import measure from "../components/measure.vue";
import { queryEquipLedger, querySystemSelect } from "@/api/equip/archive";
import {
  meterreadingqueryList,
  meterreadingdelete,
  systemCategoryqueryListTree,
  meterreadingadd,
  meterreadingupdate,
  meterreadingqueryById,
  eqpRelqueryEqpRelByEqpId,
  measuregetMeasure,
  meterreadingimport,
  eqpRelqueryByRelEqpId
} from "@/api/water/watchMeterReading";
import { queryReadingModifyHistory } from "@/api/waterBalance";
import { pageMeasureList } from "@/api/system/measure";
import importFiles from "./importFiles.vue";
const props = defineProps({
  classcode: {
    type: String,
    default: ""
  }
});
const measureclose = val => {
  measureShow.value = val;
};
const setmeasureValue = val => {
  measureShow.value = false;
  if (val) {
    addForm.value.unit = val.measureUnit;
    addForm.value.specId = val.measureCode;
    addForm.value.specName = val.measureName;
    if (addForm.value.specId != "" && addForm.value.eqpId != "") {
      measuregetMeasure({
        measureCode: addForm.value.specId
      }).then(res => {
        console.log(res);
        if (res.monitorEntityType == "EQP") {
          if (res.monitorEntityId != "") {
            if (res.monitorEntityId == addForm.value.eqpId) {
              tsspanshow2.value = false;
            } else {
              tsspanshow2.value = true;
              return false;
            }
          } else {
            tsspanshow2.value = false;
          }
        } else if (res.monitorEntityType == "SYSTEM") {
          if (res.monitorEntityId != "") {
            if (res.monitorEntityId == addForm.value.systemCode) {
              tsspanshow2.value = false;
            } else {
              tsspanshow2.value = true;
              return false;
            }
          } else {
            tsspanshow2.value = false;
          }
        } else {
          tsspanshow2.value = false;
        }
      });
    }
  }
};
const defaultProps = {
  children: "children",
  label: "name",
  value: "code"
};
const handelClose = () => {
  dialogVisible.value = false;
  dialogSuccess.value.successClose();
};
const measureShow = ref(false);
const setmeasure = () => {
  measureShow.value = true;
};
const FileVisible = ref(false);
const upfileid = ref("");
const importFile = ref("");
const total = ref(0);
const eqpList = ref([]);
const instrumenList = ref([]);
const systemList = ref([]);
const eqpList2 = ref([]);
const instrumenList2 = ref([]);
const systemList2 = ref([]);
const specIdList = ref([]);
const nodeClick = (e1emData, nodeData) => {
  console.log(e1emData, nodeData);
  // selectTree.value = e1emData;
  if (e1emData.name != addForm.value.systemName) {
    addForm.value.eqpId = "";
    addForm.value.instrumentId = "";
  }
  addForm.value.systemName = e1emData.name;
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: null,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: e1emData.code,
    systemCodes: [e1emData.code],
    positionCodes: []
  }).then(res => {
    console.log(res);
    eqpList.value = res.data;
  });
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: 35,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: e1emData.code,
    systemCodes: [e1emData.code],
    positionCodes: []
  }).then(res => {
    console.log(res);
    instrumenList.value = res.data;
  });
};
const nodeClick2 = (e1emData, nodeData) => {
  console.log(e1emData, nodeData);
  // selectTree.value = e1emData;
  if (e1emData.name != addForm.value.systemName) {
    addForm.value.eqpId = "";
    addForm.value.instrumentId = "";
  }
  addForm.value.systemName = e1emData.name;
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: null,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: e1emData.code,
    systemCodes: [e1emData.code],
    positionCodes: []
  }).then(res => {
    console.log(res);
    eqpList2.value = res.data;
  });
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: 35,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: e1emData.code,
    systemCodes: [e1emData.code],
    positionCodes: []
  }).then(res => {
    console.log(res);
    instrumenList2.value = res.data;
  });
};
const fileresultList = ref([]);
const submitHandler = val => {
  console.log(val);
  let detailsSuccess = val.details.filter(item => item.success);
  if (detailsSuccess.length > 0) {
    FileVisible.value = true;
    fileresultList.value = val.details;
    getList();
  } else {
    FileVisible.value = true;
    fileresultList.value = val.details;
    getList();
    PxMessage({
      message: "数据导入失败",
      type: "error"
    });
  }
};

const { proxy }: any = getCurrentInstance();
const fsxlsx = ref("");
const handleExportall = () => {
  proxy.download("post", "/operation/api/v1/meterreading/export", { classCode: props.classcode });
};
onMounted(() => {
  fsxlsx.value = proxy.useGetStaticUrl(`/ifp-web-static/file/xlsx/仪表导入模板.xlsx`);
  if (localStorage.getItem("chukuList")) {
  }

  upfileid.value = props.classcode;
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: null,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: "",
    systemCodes: [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    eqpList.value = res.data;
    eqpList2.value = res.data;
  });
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: 35,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: "",
    systemCodes: [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    instrumenList.value = res.data;
    instrumenList2.value = res.data;
  });
  systemCategoryqueryListTree({
    className: props.classcode
  }).then(res => {
    systemList.value = res;
    systemList2.value = res;
  });
});
const handleEditor = val => {
  console.log(val);
  buttonTitle.value = "编辑";
  meterreadingqueryById({
    id: val
  }).then(res => {
    console.log(res);
    addVisible.value = true;
    addForm.value = res;
    tsspanshow1.value = false;
    tsspanshow2.value = false;
  });
};
const handleDelete = row => {
  PxMessageBox.confirm("删除后该仪表下的抄表数据无法恢复，继续删除吗？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const data = await meterreadingdelete({ ids: [row.id] });
      PxMessage({
        message: "删除成功",
        type: "success"
      });
      getList();
    })
    .catch(() => {});
};
const addeqp = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      console.log(111);
      let parmas = {
        classCode: props.classcode,
        itemName: addForm.value.itemName,
        itemCode: addForm.value.itemCode,
        specId: addForm.value.specId,
        specName: addForm.value.specName,
        systemCode: addForm.value.systemCode,
        systemName: addForm.value.systemName,
        instrumentId: addForm.value.instrumentId,
        instrumentName: addForm.value.instrumentName,
        eqpId: addForm.value.eqpId,
        eqpName: addForm.value.eqpName,
        uslValue: addForm.value.uslValue,
        lslValue: addForm.value.lslValue,
        unit: addForm.value.unit,
        type: addForm.value.type
      };
      console.log(parmas);
      if (parmas.instrumentId != "" && parmas.eqpId != "") {
        eqpRelqueryEqpRelByEqpId({
          eqpId: parmas.eqpId
        }).then(res => {
          if (res.length > 0) {
            let instrumentList = res.filter(item => item.eqpId == parmas.instrumentId);
            console.log(instrumentList);
            if (instrumentList.length > 0) {
              tsspanshow1.value = false;
            } else {
              tsspanshow1.value = true;
              return false;
            }
          } else {
            tsspanshow1.value = false;
          }
        });
      }
      if (parmas.specId != "") {
        measuregetMeasure({
          measureCode: parmas.specId
        }).then(res => {
          console.log(res);
          if (res.monitorEntityType == "EQP") {
            if (parmas.eqpId != "") {
              if (res.monitorEntityId != "") {
                if (res.monitorEntityId == parmas.eqpId) {
                  tsspanshow2.value = false;
                } else {
                  tsspanshow2.value = true;
                  return false;
                }
              } else {
                tsspanshow2.value = false;
              }
            }
          } else if (res.monitorEntityType == "SYSTEM") {
            if (addForm.value.systemCode != "") {
              if (res.monitorEntityId != "") {
                if (res.monitorEntityId == addForm.value.systemCode) {
                  tsspanshow2.value = false;
                } else {
                  tsspanshow2.value = true;
                  return false;
                }
              } else {
                tsspanshow2.value = false;
              }
            }
          } else {
            tsspanshow2.value = false;
          }
        });
      }
      setTimeout(() => {
        if (!tsspanshow1.value && !tsspanshow2.value) {
          if (buttonTitle.value == "新增") {
            meterreadingadd(parmas).then(res => {
              PxMessage({
                message: `${buttonTitle.value == "新增" ? "添加成功" : "修改成功"}`,
                type: "success"
              });
              addVisible.value = false;
              getList();
            });
          } else {
            parmas.id = addForm.value.id;
            meterreadingupdate(parmas).then(res => {
              PxMessage({
                message: `${buttonTitle.value == "新增" ? "添加成功" : "修改成功"}`,
                type: "success"
              });
              addVisible.value = false;
              getList();
            });
          }
        }
      }, 800);
    }
  });
};
const geteqpRelqueryEqpRelByEqpId = val => {};
const detailruleFormRef = ref();
const { VITE_FANRUAN_BASE_URL } = import.meta.env;
const dialogVisible = ref(false);
function handleExport() {
  dialogVisible.value = true;
  fileresultList.value = [];
  FileVisible.value = false;
}
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
const handleExport2 = () => {
  console.log(ids.value);
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  console.log(val2, val3, val4);
  // formValue.value.className = val2;
  // formValue.value.systemCode = val3;
  // systemCodes.value = val4;
  // formRef.value?.resetFields(["categoryId", "typeId", "modelId"]);
};
// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  console.log(val2, val);
  queryParams.value.systemCode = val;
  // queryParams.systemCode = val2;
  // formRef.value?.resetFields(["categoryId", "typeId", "modelId"]);
};
// 系统组件值改变触发
const clearSystem = val => {
  console.log(val);
  queryParams.value.systemCode = "";
  // formRef.value?.resetFields(["systemCode", "categoryId", "typeId", "modelId"]);
};
const typeList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const addVisible = ref(false);
const tsspanshow1 = ref(false);
const tsspanshow2 = ref(false);
const historyVisible = ref(false);
// 图片是否上传完，是否可以保存
const buttonTitle = ref("");
const data = reactive({
  liquidList: [],
  rukuList: [],
  transportCompanyList: [],
  receiveCompanyList: [],
  typeIdList: [],
  categoryList: [],
  equipmentTypeList: [],
  positionList: [],
  selectRukuList: {},
  okselectRukuList: [],
  equipmentDeptList: [],
  modelIdList: [],
  form: {},
  wasteUnitoptions: [
    {
      value: "克",
      label: "克"
    },
    {
      value: "千克",
      label: "千克"
    },
    {
      value: "吨",
      label: "吨"
    }
  ],
  typevalueList: [
    {
      name: "自动抄表",
      value: 0
    },
    {
      name: "手动抄表",
      value: 1
    }
  ],
  photoStatusFlag: false,
  fileStatusFlag: false,
  SpcAnalysis: [],
  equipdata: {
    id: "",
    jobId: "",
    indicatorName: "",
    classCode: "",
    systemCode: "",
    indicatorLevel: "",
    point: "",
    pointUnit: "",
    step: 0,
    startValue: 0,
    targetValue: 0,
    uclValue: 0,
    lclValue: 0,
    uwlValue: 0,
    lwlValue: 0,
    uslValue: 0,
    lslValue: 0,
    u3lValue: 0,
    l3lValue: 0
  },
  addForm: {
    id: "",
    classCode: props.classcode,
    itemName: "",
    itemCode: "",
    specId: "",
    specName: "",
    systemCode: "",
    systemName: "",
    instrumentId: "",
    instrumentName: "",
    eqpId: "",
    eqpName: "",
    uslValue: null,
    lslValue: null,
    unit: "",
    type: null
  },
  rules2: {
    itemName: [{ required: true, message: "指标名称不能为空", trigger: "blur" }]
  },
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    classCode: props.classcode,
    itemName: null,
    specId: null,
    systemCode: null,
    eqpId: null,
    instrumentId: null,
    startTime: null,
    endTime: null
  },
  rules: {
    name: [{ required: true, message: "不能为空", trigger: "blur" }],
    serialNumber: [{ required: true, message: "不能为空", trigger: "blur" }],
    category: [{ required: true, message: "不能为空", trigger: "change" }],
    activityLevelUnit: [{ required: true, message: "不能为空", trigger: "change" }],
    emissionFactorName: [{ required: true, message: "不能为空", trigger: "blur" }],
    value: [{ required: true, message: "不能为空", trigger: "blur" }],
    factorSource: [{ required: true, message: "不能为空", trigger: "blur" }],
    releaseYear: [{ required: true, message: "不能为空", trigger: "blur" }],
    unit: [{ required: true, message: "不能为空", trigger: "blur" }],
    unitConversionRatio: [{ required: true, message: "不能为空", trigger: "blur" }],
    emissionCategory: [{ required: true, message: "不能为空", trigger: "change" }]
  },
  headers: {
    Authorization: "Bearer " + getToken().accessToken || ""
  },
  moduleName: "",
  dialogImageUrl: "",
  imageVisible: false,
  levelUnitList: [],
  energyList: [],
  categoryTypeList: [],
  SourceList: [],
  selectrow: null,
  nameSpanMap: {},
  oldList: [],
  oldList2: [],
  ModifyHistoryList: []
});
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 5) {
    if (row.modifyValue !== null) {
      if (row.modifyValue > row.readingValue) {
        return { background: "#FFDADA !important" };
      }
      if (row.modifyValue < row.readingValue) {
        return { background: "#DFFFEA !important" };
      }
    }
  } else {
    return {};
  }
  // return { background: "#FFDADA" };
};
const cellStyle2 = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 5) {
    if (row.modifyValue !== null) {
      if (row.modifyValue > row.readingValue) {
        return { background: "#FFDADA !important" };
      }
      if (row.modifyValue < row.readingValue) {
        return { background: "#DFFFEA !important" };
      }
    }
  } else {
    return {};
  }
  // return { background: "#FFDADA" };
};
const {
  selectRukuList,
  queryParams,
  addForm,
  rules2,
  form,
  equipdata,
  rukuList,
  selectrow,
  nameSpanMap,
  oldList,
  oldList2,
  typevalueList,
  ModifyHistoryList,
  SpcAnalysis
} = toRefs(data);
function getList() {
  loading.value = true;
  meterreadingqueryList(queryParams.value)
    .then(res => {
      typeList.value = res.data;
      loading.value = false;
      total.value = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
}

/** 取消按钮 */

/** 表单重置 */

/** 搜索按钮操作 */
function handleQuery(type) {
  getList();
}
const remoteMethod = quary => {
  console.log(quary);
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: quary,
    categoryId: null,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: queryParams.value.systemCode ? queryParams.value.systemCode : "",
    systemCodes: queryParams.value.systemCode ? [queryParams.value.systemCode] : [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    eqpList.value = res.data;
  });
};
const remoteMethod2 = quary => {
  console.log(quary);
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: quary,
    categoryId: null,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: queryParams.value.systemCode ? queryParams.value.systemCode : "",
    systemCodes: queryParams.value.systemCode ? [queryParams.value.systemCode] : [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    eqpList2.value = res.data;
  });
};
const remoteMethod12 = quary => {
  console.log(quary);
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: quary,
    categoryId: 35,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: queryParams.value.systemCode ? queryParams.value.systemCode : "",
    systemCodes: queryParams.value.systemCode ? [queryParams.value.systemCode] : [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    instrumenList.value = res.data;
  });
};
const remoteMethod22 = quary => {
  console.log(quary);
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: quary,
    categoryId: 35,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: queryParams.value.systemCode ? queryParams.value.systemCode : "",
    systemCodes: queryParams.value.systemCode ? [queryParams.value.systemCode] : [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    instrumenList2.value = res.data;
  });
};
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 20,
    classCode: props.classcode,
    itemName: null,
    specId: null,
    systemCode: null,
    eqpId: null,
    instrumentId: null,
    startTime: null,
    endTime: null
  };
  getList();
}

const eqpIdchange = val => {
  if (val) {
    addForm.value.eqpName = eqpList.value.filter(item => item.eqpId == val)[0].eqpName;
    addForm.value.systemCode = eqpList.value.filter(item => item.eqpId == val)[0].systemCode;
    addForm.value.systemName = eqpList.value.filter(item => item.eqpId == val)[0].systemName;
    if (addForm.value.specId != "" && addForm.value.eqpId != "") {
      measuregetMeasure({
        measureCode: addForm.value.specId
      }).then(res => {
        console.log(res);
        if (res.monitorEntityType == "EQP") {
          if (res.monitorEntityId != "") {
            if (res.monitorEntityId == addForm.value.eqpId) {
              tsspanshow2.value = false;
            } else {
              tsspanshow2.value = true;
              return false;
            }
          } else {
            tsspanshow2.value = false;
          }
        } else {
          tsspanshow2.value = false;
        }
      });
    }
    if (addForm.value.eqpId != "" && addForm.value.instrumentId != "") {
      eqpRelqueryEqpRelByEqpId({
        eqpId: addForm.value.eqpId
      }).then(res => {
        if (res.length > 0) {
          let instrumentList = res.filter(item => item.eqpId == addForm.value.instrumentId);
          console.log(instrumentList);
          if (instrumentList.length > 0) {
            tsspanshow1.value = false;
          } else {
            tsspanshow1.value = true;
            return false;
          }
        } else {
          tsspanshow1.value = false;
        }
      });
    }
  }
};
const instrumentIdchange = val => {
  console.log(eqpList.value.filter(item => item.eqpId == val)[0]);
  if (val) {
    addForm.value.instrumentName = instrumenList.value.filter(item => item.eqpId == val)[0].eqpName;
    addForm.value.systemCode = eqpList.value.filter(item => item.eqpId == val)[0].systemCode;
    addForm.value.systemName = eqpList.value.filter(item => item.eqpId == val)[0].systemName;
    eqpRelqueryByRelEqpId({
      eqpId: val,
      showHidden: true
    }).then(res => {
      console.log(res);
      if (res) {
        addForm.value.eqpName = res[0].eqpName;
        addForm.value.eqpId = res[0].eqpId;
      }
    });
    if (addForm.value.eqpId != "" && addForm.value.instrumentId != "") {
      eqpRelqueryEqpRelByEqpId({
        eqpId: addForm.value.eqpId
      }).then(res => {
        if (res.length > 0) {
          let instrumentList = res.filter(item => item.eqpId == addForm.value.instrumentId);
          console.log(instrumentList);
          if (instrumentList.length > 0) {
            tsspanshow1.value = false;
          } else {
            tsspanshow1.value = true;
            return false;
          }
        } else {
          tsspanshow1.value = false;
        }
      });
    }
  }
};
/** 新增按钮操作 */
function handleAdd() {
  detailruleFormRef.value?.resetFields();
  buttonTitle.value = "新增";
  addVisible.value = true;
  tsspanshow1.value = false;
  tsspanshow2.value = false;
  addForm.value = {
    id: "",
    classCode: props.classcode,
    itemName: "",
    itemCode: "",
    specId: "",
    specName: "",
    systemCode: "",
    systemName: "",
    instrumentId: "",
    instrumentName: "",
    eqpId: "",
    eqpName: "",
    uslValue: null,
    lslValue: null,
    unit: "",
    type: null
  };
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: null,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: "",
    systemCodes: [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    eqpList.value = res.data;
  });
  queryEquipLedger({
    pageNum: 1,
    pageSize: 9999,
    isAsc: "desc",
    orderByColumn: "updateTime",
    value: "",
    categoryId: 35,
    typeId: null,
    modelId: null,
    className: props.classcode,
    systemCode: "",
    systemCodes: [],
    positionCodes: []
  }).then(res => {
    console.log(res);
    instrumenList.value = res.data;
  });
}
const handleDetail = async val => {
  historyVisible.value = true;
  // equipdata.value = data;
};
getList();
</script>
<style scoped lang="scss">
.addEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.editorEquip {
  position: absolute;
  top: 0;
  top: 5px;
  left: 0;
  width: calc(100% - 48px);
  height: calc(100% - 40px);
  margin: 24px;
  background: white;
}

.px-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2002;
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-right: 34px;
  text-align: right;
  background: white;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}

.card-header {
  min-height: 40px;
  padding: 14px 15px 7px !important;
  cursor: pointer;
  user-select: none;
  background: #e7eefb;
}

.card-title {
  float: left;
  line-height: 14px;
}

.card-main {
  float: left;
  margin: -3px 8px 0 5px;
  cursor: pointer;
}

.box-card1 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card2 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card3 {
  width: calc(100% - 48px);
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.box-card4 {
  width: calc(100% - 48px);
  height: 261px;
  margin: 24px;
  overflow: hidden;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.demo-form-inline {
  .px-input {
    --px-input-width: calc(100% - 70px);
  }

  .px-form-item {
    width: 100%;
  }

  .px-textarea__inner {
    width: calc(100% - 100px) !important;
  }

  .px-form-item__label {
    font-weight: 400 !important;
  }
}

.form-div {
  padding: 24px;

  .px-row {
    margin-bottom: 16px;
  }
}

.px-icon {
  font-size: 16px !important;
}

:deep(.px-tabs--top .px-tabs__item.is-top.is-active) {
  border: none;

  .pane-bottom {
    line-height: 30px;
    border-bottom: 2px solid #3b82f6;
  }
}

:deep(.px-tabs .px-tabs__item) {
  .pane-bottom {
    line-height: 30px;
  }
}

.pane-line {
  position: absolute;
  top: 12px;
  right: 0;
  height: 15px;
  color: #dcdcdc;
  border-left: 1px solid #dcdcdc;
}

:deep(.custom-form-ui .px-form-item) {
  width: 266px !important;
}

.filename {
  position: absolute;
  bottom: -30px;
  width: 96px;
  overflow: hidden;
  color: rgb(166 167 172);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.px-descriptions__label.px-descriptions__cell.is-bordered-label) {
  width: 166px;
  background: #e7eefb;
  border: 1px solid #dfdfdf;
}

:deep(.px-descriptions__body .px-descriptions__table.is-bordered .px-descriptions__cell) {
  border: 1px solid #dfdfdf;
}

.cell-item {
  text-align: right;
}

:deep(.px-table .cell) {
  line-height: 30px;
  vertical-align: middle;
}

:deep(.px-table__header) {
  thead {
    tr {
      background-color: #e7eefb !important;

      th {
        font-size: 14px;
        font-weight: bold;
        color: #000;
        background-color: #e7eefb !important;
      }
    }
  }
}

:deep(.px-table--isfixedHeader .px-table__header-wrapper .px-table-fixed-column--right) {
  background-color: #e7eefb !important;
}

.modifyValue {
  display: inline-block;
  width: calc(100% - 30px);
}

.valueColor1 {
  color: #3b82f6;
}

.valueColor2 {
  color: #f59e0b;
}

.valueColor3 {
  color: #10b981;
}

#print-content {
  position: absolute;
  left: -20000px;
}

#print-img {
  position: absolute;
  left: -20000px;
  width: 800px;
}

.tsspan {
  display: inline-block;
  margin: 0 0 12px 125px;
  color: red;
}

.import-bottle {
  .import-bottle-title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-left: 16px;
    margin-bottom: 24px;
    line-height: 1;
    color: #333;
    background-color: #fef5e6;
    border: 1px solid #f7b648;
    border-radius: 6px;

    .download {
      color: #3b82f6;
      cursor: pointer;
    }
  }

  .import-bottle-upload {
    width: 100%;
    margin-bottom: 24px;
  }
}
</style>
